<template>
    <div class="search-bar">
      <input
        type="text"
        v-model="query"
        placeholder="搜索便签内容..."
        @input="handleSearch"
      />
      <div v-if="query" class="search-icon" @click="clearSearch">
        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M18 6L6 18M6 6L18 18" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
        </svg>
      </div>
      <div v-else class="search-icon">
        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M11 19C15.4183 19 19 15.4183 19 11C19 6.58172 15.4183 3 11 3C6.58172 3 3 6.58172 3 11C3 15.4183 6.58172 19 11 19Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
          <path d="M21 21L16.65 16.65" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
        </svg>
      </div>
      
      <div v-if="query && store.filteredNotes.length === 0" class="no-results">
        没有找到相关便签
      </div>
    </div>
  </template>
  
  <script setup>
  import { ref, watch } from 'vue'
  import { useNoteStore } from '../stores/noteStore'
  
  const store = useNoteStore()
  const query = ref('')
  
  function handleSearch() {
    store.searchQuery = query.value
  }
  
  function clearSearch() {
    query.value = ''
    store.searchQuery = ''
  }
  
  // 当selectedTagId变化时，也触发搜索更新
  watch(() => store.selectedTagId, () => {
    handleSearch()
  })
  </script>
  
  <style lang="scss" scoped>
  @import '../styles/_variables.scss';
  @import '../styles/_mixins.scss';
  
  .search-bar {
    position: relative;
    width: 300px;
    
    input {
      width: 100%;
      padding: 0.5rem 2rem 0.5rem 1rem;
      border: 1px solid $border-color;
      border-radius: $border-radius;
      font-size: 0.875rem;
      transition: all 0.2s ease;
      
      &:focus {
        outline: none;
        border-color: $primary-color;
        box-shadow: 0 0 0 2px rgba($primary-color, 0.1);
      }
      
      &::placeholder {
        color: $text-secondary;
      }
    }
    
    .search-icon {
      position: absolute;
      right: 0.75rem;
      top: 50%;
      transform: translateY(-50%);
      display: flex;
      align-items: center;
      justify-content: center;
      color: $text-secondary;
      cursor: pointer;
      
      svg {
        width: 16px;
        height: 16px;
      }
    }
    
    .no-results {
      position: absolute;
      top: 100%;
      left: 0;
      width: 100%;
      padding: 0.5rem;
      background-color: white;
      border: 1px solid $border-color;
      border-top: none;
      border-radius: 0 0 $border-radius $border-radius;
      color: $text-secondary;
      font-size: 0.875rem;
      z-index: 1;
    }
  }
  </style>